<template>
  <view class="draw-layout">
    <my-header background-color="transparent">
      <view style="width: calc(750rpx - 160rpx)" v-if="resultStatus">
        <image
          style="width: 550rpx; height: 105rpx"
          src="https://www.dingxians.cn/upload/images/index/ic-congratulations.png"
          mode="widthFix"
        />
      </view>
    </my-header>
    <my-content class="content" :default-padding-top="25">
      <view class="result_box" v-if="resultStatus">
        <view class="result" :class="['result_' + (prizeData.length > 5 ? 5 : prizeData.length), prizeData.length > 5 ? 'fullscreen' : '']">
          <view class="result_item" :class="'result_item_' + (index % 3)" v-for="(item, index) in prizeData" :key="item.id">
            <view class="result-mask">
              <view class="mask-bg" :style="{ backgroundColor: levelMask(item.level_id) }"></view>
              <view
                class="result_prize"
                :style="{backgroundImage: levelBg(item.level_id)}"
              >
                <!-- <image mode="widthFix" :src="item.level_image" class="level_image"></image> -->
                <image mode="widthFix" class="result_prize_image" :src="item.blind_box_prize_image"></image>
                <view class="result-info">
                  <view class="result-price">
                    <text class="result-price-icon">￥</text>
                    {{ item.price}}
                  </view>
                  <view style="font-size: 24rpx; font-weight: 400">x{{ item.num }}</view>
                </view>
                <view class="result_prize_name">{{ item.blind_box_prize_name }}</view>
                <!--        ${itemLevelBg(item.level_id)}  ${pay_mode}       -->
                <view class="mask-anim" ref="mask"></view>
              </view>
            </view>

            <view v-if="!item.exchange && pay_mode != 1" @click="exchangeOne(item, index)" class="item_exchange_btn">
              <view>拒提价:</view>
              <view class="recovery_price">
                <view>{{ item.recovery_price }}</view>
                <image class="gold_icon" mode="widthFix" src="https://www.dingxians.cn/upload/images/shop/money.png"></image>
              </view>
            </view>
            <view v-if="item.exchange && pay_mode != 1" class="item_exchange_btn active">
              <view>已拒提:</view>
              <view class="recovery_price">
                <view>{{ item.recovery_price }}</view>
                <image class="gold_icon" mode="widthFix" src="https://www.dingxians.cn/upload/images/shop/money.png"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="tip_box">
          <view class="tip_box_text">已为您存放至盒柜</view>
          <view class="tip_box_next" @click="header('/pages/box/index', 2)">前往盒柜</view>
        </view>
        <view class="action_group">
<!--          <image class="action-btn" @click="header('/pages/box/index', 2)" src="https://www.dingxians.cn/upload/images/index/btn-back.png"></image>-->
          <image class="action-btn" @click="exchange" src="https://www.dingxians.cn/upload/images/index/btn-exchange.png"></image>
          <image class="action-btn" @click="back" src="https://www.dingxians.cn/upload/images/index/btn-retry.png"></image>
<!--          <view class="action-btn back" @click="header('/pages/box/index', 2)">反悔重抽</view>
          <view class="action-btn exchange" @click="exchange()">全部拒提</view>
          <view class="action-btn retry" @click="back()">再来一次</view>-->
        </view>
      </view>
      <view class="draw_box" v-else>
        <view class="draw-box-bg">
          <three
            ref="three"
            v-if="pay_mode === 2"
            :devicePixelRatio="devicePixelRatio"
            @playVoice="playVoice"
            @drawEnd="start"
          ></three>
          <one
            ref="one"
            v-if="pay_mode === 1"
            :devicePixelRatio="devicePixelRatio"
            @playVoice="playVoice"
            @drawEnd="start"
          ></one>
          <five
            ref="five"
            v-if="pay_mode === 3"
            :devicePixelRatio="devicePixelRatio"
            @playVoice="playVoice"
            @drawEnd="start"
          ></five>
        </view>
      </view>
      <view v-if="!resultStatus" @click="start()" mode="widthFix" class="draw_btn_box btn-primary">跳过</view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
import three from '../../components/Draw/three.vue'
import five from '../../components/Draw/five.vue'
import one from '../../components/Draw/one.vue'
import box from '../../mixins/box.js'

export default {
  components: {
    three, //三发动画
    one, //一发动画
    five, //五发动画
  },
  mixins: [box],
  data() {
    return {
      box_order_id: '',
      prizeData: [], // 抽奖结果
      list: [], // 商品
      resultStatus: false,
      moveX: 0,
      time: 5,
      goods_id: 18,
      timers: null,
      drawText: '停止滚动',
      devicePixelRatio: 1, //像素值
      lastRecord: '',
      box_id: '',
      pay_mode: '',
      result_audio: null,
      draw_audio: null,
      skipStatus: false,
      exchangeBtn: true,
      total_recovery_price: 0,

      itemMask: 0,
      animTimer: 0,
    }
  },
  beforeDestroy() {
    this.result_audio.destroy()
    if (this.draw_audio) {
      this.draw_audio.destroy()
    }
  },
  onLoad(option) {
    this.box_order_id = option.box_order_id
    this.box_id = option.box_id
    this.pay_mode = Number(option.pay_mode)

    this.result_audio = uni.createInnerAudioContext()
    this.result_audio.autoplay = false

    if (this.directDraw()) {
      // 10连，20连，30连
      uni.showLoading({title: '正在开奖中...'})
      this.resultStatus = true
      this.getData()
      return
    }

    this.draw_audio = uni.createInnerAudioContext()
    this.draw_audio.autoplay = true

    this.getGoodsList()
  },
  onReady() {
    uni.getSystemInfo({
      success: (res) => {
        this.devicePixelRatio = res.screenWidth / 750
      },
    })
  },
  onUnload() {
    clearInterval(this.animTimer)
  },
  computed: {
    levelMask() {
      return (level) => {
        switch (level) {
          case 1:
            return '#043032'
          case 2:
            return '#300B0B'
          case 3:
            return '#240221'
          case 4:
            return '#302D0B'
        }
      }
    },
  },
  methods: {
    levelBg(level_id) {
      let extension = 'png'
      if (level_id > 2) {
        extension = 'gif'
      }
      return `url(https://www.dingxians.cn/upload/images/index/bg-level-${level_id}.${extension})`
    },
    directDraw() {
      return this.pay_mode > 3
    },
    getMode(index) {
      switch (+index) {
        case 1:
          return 'one'
        case 2:
          return 'three'
        case 3:
          return 'five'
      }
    },
    exchange() {
      this.exchangeBtn = false
      let ids = this.prizeData
        .filter((item) => {
          return !item.exchange
        })
        .map((item) => {
          return item.id + ':' + item.num
        }).join(',')
      // var flag = false
      let count = 0
      for (var i = 0; i < this.prizeData.length; i++) {
        if (!this.prizeData[i].exchange) {
          count += +this.prizeData[i].recovery_price * 100
          //if (this.prizeData[i].level_id > 1) flag = true
        }
      }

        count /= 100
        uni.showModal({
          title: '温馨提示',
          content: `可拒提${count}金币`,
          confirmText: '确定拒提',
          success: (result) => {
            if (result.confirm) {
              api.blindBoxOrderPrizes
                .exchange({ params: ids })
                .then((res) => {
                  console.log(res)
                  if (res.code === 200) {
                    this.show(res.msg + ', 已拒提' + count + '金币')

                    setTimeout(() => {
                      this.back()
                    }, 500)
                  }
                })
                .catch((error) => {
                  console.log(error)
                })
            } else if (result.cancel) {
              this.exchangeBtn = true
            }
          },
        })

      /* if (flag) {
        
      } else {
        api.blindBoxOrderPrizes
          .exchange({ params: ids })
          .then((res) => {
            if (res.code === 200) {
              this.show(res.msg)

              setTimeout(() => {
                this.back()
              }, 500)
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } */
    },
    exchangeOne(item, index) {
      item.exchange = true
      this.$set(this.prizeData, index, item)
      api.blindBoxOrderPrizes
        .exchange({ params: item.id + ':' + item.num })
        .then((res) => {
          if (res.code === 200) {
            this.show(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    start() {
      this.skipStatus = false
      this.resultStatus = true
      // this.result_audio.src = 'https://www.dingxians.cn/app/draw_result.mp3'; // 配置音频播放路径
      let src = 'https://www.dingxians.cn/app/y1253.mp3' // 配置音频播放路径
      this.playVoice(src)
      // this.result_audio.play()
      this.result_audio.loop = false // 是否循环播放
      if (this.draw_audio) {
        // this.draw_audio.destroy()
      }
    },

    //获取奖品列表
    async getGoodsList() {
      await api.blindBox
        .show(this.box_id)
        .then((res) => {
          if (res.code === 200) {
            this.list = res.data.data.blind_box_prize
            console.log(this.list)
            this.getData()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },

    playVoice(url) {
      // url即为音频路径
      if (url) {
        // 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
        if (this.lastRecord == url && !this.draw_audio.paused) {
          uni.showToast({
            title: '播放失败',
          })
          this.draw_audio.stop() // 停止
          return
        }
        this.lastRecord = url // 将路径赋值给定义的变量好做判断
        this.draw_audio.src = url // 配置音频播放路径
        // this.draw_audio.play() // 播放
        this.draw_audio.loop = false // 是否循环播放
      }
    },
    getData() {
      api.blindBoxOrders
        .show(this.box_order_id)
        .then((res) => {
          if (this.directDraw()) {
            uni.hideLoading()
          }
          if (res.code === 200) {
            this.prizeData = res.data.data // 抽奖结果
            /*for (let i = 0; i < 4; i++) {
              console.log(i, res.data.data.length)
              this.prizeData.push(...res.data.data)
            }*/
            this.total_recovery_price = res.data.total_recovery_price //

            if (this.directDraw()) {
              this.start()
              return
            }

             const refData = {
              1: 'one',
              2: 'three',
              3: 'five',
            }
            let refName = refData[this.pay_mode]

            // 奖品列表
            this.$refs[refName].textList = this.list
            // 初始化抽奖数据 n * m
            // 开始抽奖
            // 当前开奖动画组件的ref名字
            this.$refs[refName].resultsList = this.prizeData
            this.$refs[refName].isStart = true
            this.$nextTick(() => {
              this.$refs[refName].init()
              // this.playVoice('https://pd.pdaxiang.com/upload/static/media/openbox.mp3')
            })
            this.skipStatus = true
          }
        })
        .catch((error) => {
          console.log(error)
          if (this.directDraw()) {
            uni.hideLoading()
          }
        })
    },
    back() {
      uni.navigateBack()
    },
  },
}
</script>

<style lang="scss" scoped>
.draw-layout {
  height: 100vh;
  width: 100%;
  background-image: url('https://www.dingxians.cn/upload/images/common/bg.png');
  background-size: 100% 100%;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .back {
    position: absolute;
    top: 60rpx;
    left: 30rpx;
    width: 60rpx;
    z-index: 2;
  }

  .result_bg {
    flex: 1;

    width: 100%;
    z-index: -1;
  }

  .draw_box {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;

    .draw_bg {
      /* height: 100vh;
      position: absolute;
      top: 0;
      left: 0; */
      width: 100%;
      /* width: 710rpx; */

      z-index: -3;
    }

    .draw-box-bg {
      width: 100%;
      /* box-sizing: border-box; */
      background-repeat: no-repeat;
      background-size: 100% 100%;
      /* padding: 100rpx 50rpx; */
    }
  }

  .draw_btn_box {
    /* position: absolute;
      bottom: 100rpx;
      left: calc(50% - 305rpx); */
    margin: 0 auto;
    width: 610rpx;
    height: 84rpx;
    line-height: 84rpx;
    z-index: 2;
    text-align: center;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
    background-size: 100% 100%;
    margin-bottom: 120rpx;
  }

  .result_box {
    height: 100%;
    /*flex: 1;*/
    overflow-y: hidden;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .tip_box {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #fff;
      margin: 30rpx auto 50rpx auto;

      .tip_box_text {
        margin-right: 20rpx;
      }

      .tip_box_next {
        color: #ee5093;
      }
    }

    .action_group {
      font-size: 24rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 690rpx;
      text-align: center;
      margin-bottom: 50rpx;

      .action-btn {
        width: 300rpx;
        background-size: 100% 100%;
        height: 100rpx;
        line-height: 100rpx;
        box-sizing: border-box;
        margin-left: 30rpx;

        /*&:last-child {
          margin-top: 30rpx;
          margin-left: 0;
        }*/
      }

      .action_group_btn {
        // background-color: #409EFF;
        // border-radius: 50rpx;
        width: 200rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 20rpx;

        .recovery_price {
          display: flex;
          align-items: center;

          .gold_icon {
            margin-left: 10rpx;
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }

    .result {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      /* margin-top: 300rpx; */
      // border:1rpx solid green;
      .result_item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // border:1rpx solid red;
        flex-direction: column;

        .item_exchange_btn {
          font-size: 36rpx;
          color: white;
          // background-color: #409EFF;
          // border-radius: 50rpx;
          width: 280rpx;
          height: 64rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20rpx;
          position: relative;
          background-size: 100%;

          .exchange_btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 212rpx;
            height: 84rpx;
            z-index: -1;
          }

          .recovery_price {
            display: flex;
            align-items: center;
            margin-left: 10rpx;

            .gold_icon {
              margin-left: 10rpx;
              width: 30rpx;
              height: 30rpx;
            }
          }

          /*&.active {
            background-image: url('https://www.dingxians.cn/upload/images/index/bg-exchange-disable.png');
          }*/

          // &.active {
          // 	background-color: #999;
          // }
        }

        .result-mask {
          position: relative;

          .mask-bg {
            position: absolute;
            left: 5%;
            top: 5%;
            content: '';
            width: 90%;
            height: 90%;
            /* background-color: aqua; */
            filter: blur(20rpx);
            /* z-index: -1; */
          }
        }

        .result_prize {
          display: flex;
          flex-direction: column;
          /* align-items: center; */
          justify-content: center;
          background-size: 100% 100%;
          // background-color: red;
          /* border-radius: 10rpx; */
          // width: 400rpx;
          height: 620rpx;
          // border:1rpx solid #f60;
          width: 440rpx;
          position: relative;
          z-index: 10;

          /* &::before {
            
          } */

          .mask-anim {
            position: absolute;
            left: -38rpx;
            top: -28rpx;
            width: 515rpx;
            height: 680rpx;
            z-index: 888;
            background-size: 515rpx 16320rpx;
            background-position: 0 0;
            animation: .2s steps(24) infinite forwards;
          }

          .level-icon {
            z-index: 10;
            color: white;
            position: absolute;
            left: 30rpx;
            top: 30rpx;
            line-height: 64rpx;
            width: 160rpx;
            height: 64rpx;
            box-sizing: border-box;
            padding-left: 73rpx;
            background-size: 100% 100%;
            font-family: 'youshe', serif;
          }

          .level_image {
            position: absolute;
            left: 50%;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            transform: translateX(-50%);
          }

          .result_prize_image {
            margin-top: 20rpx;
            width: 260rpx;
            height: 260rpx;
            align-self: center;
          }

          .result-info {
            margin: 30rpx 40rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;

            .result-price {
              text-align: center;
              font-weight: bold;
              width: 192rpx;
              height: 60rpx;
              line-height: 60rpx;
              background-size: 100% 100%;
              font-size: 44rpx;
              color: #EE5093;

              .result-price-icon {
                font-size: 24rpx;
              }
            }
          }

          .result_prize_name {
            margin-top: 24rpx;
            align-self: center;
            font-size: 28rpx;
            text-align: center;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 340rpx; /* margin: 50rpx auto; */
          }

          .result_prize_exchange {
            font-size: 26rpx;
            display: flex;
            align-items: center;
            color: #fff;

            .gold_icon {
              width: 30rpx;
              height: 30rpx;
              margin-left: 10rpx;
            }
          }
        }
      }

      &.result_3 {
        flex-wrap: wrap;
        /* justify-content: center;
        align-items: center; */
        /* justify-content: flex-start; */
        justify-content: center;
        align-items: initial;
        /* align-items: flex-start; */
        /* flex-shrink: 0;
        flex-basis: 0; */
        /* flex: auto; */
        /* 待完成 */

        .result_item {
          width: 750rpx;
          // height: 400rpx;
          .result_prize {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* align-items: flex-start; */
            justify-content: center;
            border-radius: 10rpx;
            width: 260rpx;
            height: 370rpx;

            .mask-anim {
              left: -25rpx;
              top: -24rpx;
              width: 305rpx;
              height: 410rpx;
              background-size: 305rpx 9840rpx;
            }

            // height: 600rpx;
            .level-icon {
              color: white;
              position: absolute;
              left: 30rpx;
              top: 30rpx;
              line-height: 32rpx;
              width: 80rpx;
              height: 32rpx;
              box-sizing: border-box;
              padding-left: 36rpx;
              background-size: 100% 100%;
              font-family: 'youshe';
              font-size: 20rpx;
            }

            .result_prize_image {
              width: 180rpx;
              height: 180rpx;
            }

            .result-info {
              margin: 30rpx 0 0;
              padding: 0 30rpx;
              width: 100%;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: white;

              .result-price {
                text-align: center;
                font-weight: bold;
                width: 110rpx;
                height: 38rpx;
                line-height: 38rpx;
                font-size: 22rpx;
                background-size: 100% 100%;

                .result-price-icon {
                  font-size: 16rpx;
                }
              }
            }

            .result_prize_name {
              font-size: 16rpx;
              margin-top: 15rpx;
              width: 256rpx; /* margin: 50rpx auto; */
            }

            /*  .result_prize_name {
              width: 250rpx;
              margin: 10rpx auto 30rpx auto;
            } */
          }

          &.result_item_1,
          &.result_item_2 {
            width: 45%;
          }

          &.result_item_1 {
            justify-content: flex-start;
          }

          &.result_item_2 {
            justify-content: flex-start;
          }
        }
      }

      &.result_5 {
        /* margin: 0 30rpx; */
        overflow-y: scroll;
        height: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;

        &.fullscreen {
          padding: 30rpx 0;
          align-content: flex-start;
        }

        .result_item {
          width: 225rpx;

          /* height: 350rpx; */

          .item_exchange_btn {
            width: 100%;
            height: 42rpx;
            font-size: 22rpx;
          }

          .result_prize {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 10rpx;
            width: 225rpx;
            height: 300rpx;

            .result_prize_image {
              width: 150rpx;
              height: 150rpx;
            }

            .mask-anim {
              left: -18rpx;
              top: -18rpx;
              width: 260rpx;
              height: 330rpx;
              background-size: 260rpx 7920rpx;
            }

            .level-icon {
              left: 20rpx;
              top: 20rpx;
              line-height: 26rpx;
              width: 66rpx;
              height: 26rpx;
              padding-left: 30rpx;
              font-size: 16rpx;
            }

            .result-info {
              margin: 20rpx 0 0;
              padding: 0 30rpx;
              width: 100%;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: white;

              .result-price {
                text-align: center;
                font-weight: bold;
                width: 76rpx;
                height: 26rpx;
                line-height: 26rpx;
                font-size: 18rpx;
                background-size: 100% 100%;

                .result-price-icon {
                  font-size: 11rpx;
                }
              }
            }

            .result_prize_name {
              font-size: 12rpx;
              margin-top: 6rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              width: 186rpx; /* margin: 50rpx auto; */
            }
          }

          &.result_item_0,
          &.result_item_1,
          &.result_item_2 {
            justify-content: center;
            width: 30%;
            margin-bottom: 50rpx;
            box-sizing: border-box;
          }

          &.result_item_1 {
            margin: 0 15rpx 50rpx 15rpx;
          }

          &.result_item_0,
          &.result_item_2 {
            justify-content: flex-start;
          }

          &.result_item_4 {
            margin-left: 15rpx;
          }

          /* &.result_item_3,
          &.result_item_4 {
            justify-self: center;
          }
 */

          &.result_item_0 {
            margin-left: 20rpx;
            box-sizing: border-box;
          }

          &.result_item_2 {
            box-sizing: border-box;
            margin-right: 20rpx;
          }
        }
      }
    }

    /*.action_group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .action_btn {
        width: 400rpx;
      }
    }*/
  }
}
</style>
